<template>
  <div>
    <div class="dom">
      <p>老百姓自营商城</p>
      <div class="com">
        <input
          class="p1"
          type="text"
          placeholder="酒精"
        />
        <button class="p2">
          <img
            class=""
            src="https://img.alicdn.com/imgextra/i1/O1CN01Ifmwgt1ZyVL0XowTZ_!!6000000003263-2-tps-32-32.png"
            style="
              object-fit: contain;
              width: 16px;
              height: 16px;
              margin-right: 2px;
            "
          /><span>搜索</span>
        </button>
      </div>
      <ul class="p3">
        <li v-for="item in arr" :key="item.id">
          <img :src="item.url" alt="">
          {{ item.name }}
          {{ item.price }}
          <button @click="pink(item.id)">加入购物车</button>
        </li>
      </ul>

      <span>购物车{{ mody }}</span>
      <ul>
        <li v-for="item in arr_car" :key="item.id">
          <input type="checkbox" @click="flay(item)" />
          <img :src="item.url" alt="" />
          {{ item.name }}
          {{ item.price }}
          <button @click="jian(item)">-</button>
          <span>{{ item.num }}</span>
          <button @click="jia(item)">+</button>
          <button @click="shan(item.id)">删除</button>
           <button @click="picj(item.id)">去结算</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr_car: [],
      cike:[],
      arr: [
        {
          id: 1,
          url: "https://www.liangyiyy.com/uploads/20250114/badacc1931ccec68f7de3d37d8333a83.jpg",
          name: "川北琵琶膏",
          price: 33,
          num: 1,
          pig: 1,
        },
        {
          id: 2,
          url: "https://b0.bdstatic.com/3b84de1ba7c762b4c989a244d5c5ac04.jpg",
          name: "感冒灵",
          price: 15,
          num: 1,
          pig: 1,
        },
        {
          id: 3,
          url: "https://img2.baidu.com/it/u=2669599156,3013492870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          name: "金嗓子",
          price: 23,
          num: 1,
          pig: 2,
        },
        {
          id: 4,
          url: "https://imgservice.suning.cn/uimg1/b2c/image/lqPnoOXUjeeINM_GwjZ0aQ.jpg_800w_800h_4e",
          name: "儿童贴",
          price: 13,
          num: 1,
          pig: 2,
        },
        {
          id: 5,
          url: "https://copyright.bdstatic.com/vcg/creative/9046d4eb36828b85d4f5fb7cee916862.jpg@wm_1,k_cGljX2JqaHdhdGVyLmpwZw==",
          name: "蜂蜜水",
          price: 7,
          num: 1,
          pig: 2,
        },
        {
          id: 6,
          url: "https://t14.baidu.com/it/u=3556412149,4175899012&fm=224&app=112&f=JPEG?w=500&h=500",
          name: "抗病毒口服液",
          price: 19,
          num: 1,
          pig: 2,
        },
        {
          id: 7,
          url: "https://b0.bdstatic.com/c9010b349d9bce70c04cacd962d75f25.jpg",
          name: "钙片",
          price: 10,
          num: 1,
          pig: 2,
        },
        {
          id: 8,
          url: "https://img14.360buyimg.com/pop/jfs/t1/217508/20/19594/75205/62909983E76367a46/bf184da542766a35.jpg",
          name: "板蓝根",
          price: 11,
          num: 1,
          pig: 2,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    picj(id){
    var a   =this.arr_car.find((item)=>item.id==id)
      this.cike.push({
        id: this.cike.length,
        url: a.url,
        price: a.price,
        num: 1,
      });
    },
    pink(id) {
      var a = this.arr.find((item) => item.id == id);
      this.arr_car.push({
        id: this.arr_car.length,
        url: a.url,
        price: a.price,
        num: 1,
      });
    },
    jia(i) {
      i.num++;
    },
    jian(i) {
      if (i.num > 1) {
        i.num--;
      }
    },
    shan(i) {
      var a = this.arr_car.findIndex((item) => item.id == i);
      this.arr_car.splice(a, 1);
    },
  },
  computed: {
    mody() {
      var num = 0;
      this.arr_car.forEach((item) => {
        num += item.price * item.num;
      });
      return num;
    },
  },
};
</script>
<style lang='less' scoped>
img {
  width: 100px;
  height: 100px;
}
.dom {
  width: 1000px;
  height: 1000px;
  margin: auto;
  float: left;
}
.com {
  width: 1000px;
  height: 100px;
}
.p1 {
  border: 2px solid #1f1f1f;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 400;
  height: 36px;
  line-height: 14px;
  padding: 0 70px 0 20px;
  position: relative;
  z-index: 0;
}
.p2 {
  align-items: center;
  background: blue;
  border: 0;
  border-radius: 50px;
  display: flex;
  height: 32px;
  position: relative;
  left: 208px;
  top: -36px;
}
.p3 {
  float: left;
}
</style>